<template>
  <sub-menu>
    <query-order v-model="query" @change="changeQuery" :reset="resetQuery"></query-order>
    <div class="container-table">
      <div class="table-top">
        <div class="left">
          <query-tabs v-model="query.status" @change="changeQuery" :tab-panes="statusOptions"/>
        </div>
        <div class="right" v-if="auth.isAdmin || auth.OrderListExport || auth.OrderItemExport">
          <el-button
            v-if="auth.isAdmin || auth.OrderListExport"
            size="mini"
            type="primary"
            plain
            @click.native="(e) => {orderListExport();}"
          >导出订单列表
          </el-button>
          <el-button
            v-if="auth.isAdmin || auth.OrderItemExport"
            size="mini"
            type="primary"
            plain
            @click.native="(e) => {orderListExport(true);}"
          >导出订单商品详情
          </el-button>
        </div>
      </div>
      <!-- 表格start -->
      <div class="table-conter">
        <el-table
          class="list-table my-table-float"
          :data="dataItem.items"
          :row-class-name="highlightRowClassName"
          :highlight-current-row="true"
          style="width: 100%"
          :row-key="rowIdentifier"
          :current-row-key="clickedRow[rowIdentifier]"
        >
          <el-table-column
            type="index"
            :width="(query.page - 1) * query.page_size < 950 ? 48 : (query.page - 1) * query.page_size < 999950 ? 68 : 88"
            label="序号"
            :index="indexMethod"
            align="center"
          >
          </el-table-column>
          <el-table-column label="订单编号" prop="code" width="150">
            <template slot-scope="scope">
              <div style="position: relative;">
                <span v-if="auth.isAdmin || auth.OrderDetail">
                  <a class="order-no td-item add-dot2" href="javascript:void(0);" @click.prevent="orderShowHideDetail(scope.row.id)">
                    {{scope.row.code}}
                  </a>
                </span>
                <span v-else class="td-item add-dot2">{{scope.row.code}}</span>
                <span v-if="scope.row.is_presale" class="order-type-icon presale-order">预</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="县域" prop="city_title" min-width="70">
            <template slot-scope="scope">
              <div class="td-item add-dot2">
                {{ scope.row.city_title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="门店名称" prop="store_title" min-width="120">
            <template slot-scope="scope">
              <div class="td-item add-dot2">
                {{ scope.row.store_title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单价格" min-width="90">
            <template slot-scope="scope">
              <div class="td-item add-dot2">
                {{ scope.row.order_price == 0 ? '' : '￥' }}{{ scope.row.order_price == 0 ? '-' : returnPrice(scope.row.order_price) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="付款状态" min-width="80">
            <template slot-scope="scope">
              <el-tag disable-transitions size="small" :type="scope.row.pay_status === 'wait_complete' ? 'danger' : 'info'">
                {{payStatus[scope.row.pay_status]}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="已付款" min-width="85">
            <template slot-scope="scope">
              <div class="td-item add-dot2">
                {{ scope.row.amount_pay == 0 ? '' : '￥' }}{{ scope.row.amount_pay == 0 ? '-' : returnPrice(scope.row.amount_pay) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="待付款" min-width="85">
            <template slot-scope="scope">
              <div class="td-item add-dot2">
                {{ scope.row.order_price - scope.row.amount_pay == 0 ? '' : '￥' }}{{ scope.row.order_price - scope.row.amount_pay == 0 ? '-' : returnPrice(scope.row.order_price - scope.row.amount_pay) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" min-width="80">
            <template slot-scope="scope">
              <el-tag disable-transitions size="small" :type="statusTagType[scope.row.status]">
                {{orderStatus[scope.row.status]}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" min-width="100" prop="created">
            <template slot-scope="scope">
              <div>{{returnDate(scope.row.created)}}</div>
              <div>{{returnTime(scope.row.created)}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <my-table-operate
                @command-click="handleCommandClick(scope.row)"
                :list="[
                  {
                    title: '取消订单',
                    isDisplay: (auth.isAdmin || auth.OrderCancel) && orderStatus[scope.row.status] === '待确认',
                    command: () => handleOrderCancel(scope.row.id)
                  }
                ]"
              ></my-table-operate>
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格end -->
      </div>
      <div class="footer" v-if="dataItem.num > 0">
        <div class="table-pagination">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 30, 40, 50]"
            @size-change="changePageSize"
            @current-change="changePage"
            :total="dataItem.num"
            :page-size="query.page_size"
            :current-page="query.page"
          />
        </div>
      </div>
    </div>
    <!--订单详情-->
    <detail-order-list :callback="myCallBack" :getPageComponents="viewGetPageComponents" ref="DetailOrderList"/>
    <detail-order-after-sale :callback="myCallBack" :getPageComponents="viewGetPageComponents" ref="DetailOrderAfterSale"/>
    <!--订单修改价格-->
    <!--<order-price-update :callback="myCallBack" />-->
  </sub-menu>
</template>

<script>
  import { SelectOption, TableOperate, SelectCity } from '@/common';
  import {Config, DataHandle, Constant, Http} from '@/util';
  import QueryOrder from './QueryOrder';
  import DetailOrderList from './DetailOrderList';
  import DetailOrderAfterSale from '@/view/business/afterSale/DetailOrderAfterSale';
  import tableMixin from '@/share/mixin/table.mixin';
  import mainMixin from '@/share/mixin/main.mixin';
  import queryTabs from '@/share/layout/QueryTabs';

  export default {
    name: "OrderList",
    components: {
      'my-select-city': SelectCity,
      'select-option': SelectOption,
      'my-table-operate': TableOperate,
      'detail-order-list': DetailOrderList,
      'detail-order-after-sale': DetailOrderAfterSale,
      'query-order': QueryOrder,
      'query-tabs': queryTabs
    },
    mixins: [tableMixin, mainMixin],
    created() {
      documentTitle('订单 - 订单列表');
      this.initQuery();

      //在Query组件初始化
      //this.getOrderGetList(this.query);
    },
    data() {
      return {
        dataItem: {
          items: [],
          num: 0
        },
        orderStatus: Constant.ORDER_STATUS,
        payStatus: Constant.PAY_STATUS,
        query: { },
        statusTagType: {
          wait_confirm: 'warning',
          confirmed: 'primary',
          assigned: 'primary',
          wait_delivery: 'primary',
          deliveried: 'success',
          received: 'regular',
          order_done: 'regular',
          order_canceled: 'info'
        },

        statusOptions: {
          '全部': '',
          '待确认': 'wait_confirm',
          '待发货': 'wait_delivery',
          '待收货': 'deliveried',
          '已完成': 'order_done',
          '已取消': 'order_canceled'
        },
      }
    },
    methods: {

      //组件回调
      myCallBack(res) {
        this.getOrderGetList(this.query);
      },
      changePageSize(pageSize) {
        let {query} = this;
        query.page = 1;
        query.page_size = pageSize;
        this.$data.query = query;
        this.getOrderGetList(query);
        window.scrollTo(0, 0);
      },
      //翻页
      changePage(page) {
        let {query} = this;
        query.page = page;
        this.$data.query = query;
        this.getOrderGetList(query);
        window.scrollTo(0, 0);
      },

      initQuery(resetData) {
        let provinceCode = '';
        if(resetData && resetData.province_code) provinceCode = resetData.province_code;
        
        this.$data.query = Object.assign({}, this.$data.query, {
          province_code: provinceCode,
          city_id: '',
          status: '',
          pay_status: '',
          order_type: '',
          condition: '',
          to_be_canceled: '',
          begin_date: '',
          end_date: '',
          is_init: 1, // 初始状态下，返回列表不含已取消的订单。1 表示初始状态
          page: 1,
          page_size: Constant.PAGE_SIZE
        })
      },

      changeQuery() {
        // 判断是否输入了查询条件？如果输入了查询条件，则将is_init 设置为0，即查询列表返回已取消的订单。
        if (this.query.status === 'order_canceled') {
          this.query.is_init = 0;
        } else {
          this.query.is_init = 1;
        }
        this.getOrderGetList(this.query);
        window.scrollTo(0, 0);
      },
      resetQuery(resetData) {
        this.initQuery(resetData);
        this.getOrderGetList(this.query);
        window.scrollTo(0, 0);
      },

      // 默认不导出详情
      async orderListExport(hasItemDetail = false) {
        let api = hasItemDetail ? Config.api.orderItemExport : Config.api.orderListExport;
        let {city_id, status, pay_status, order_type, to_be_canceled, condition, begin_date, end_date, is_init} = this.query;
        let query = {
          city_id,
          status,
          pay_status,
          order_type,
          to_be_canceled,
          condition,
          begin_date,
          end_date,
          is_init
        }
        //判断是否可导出
        this.$loading({ isShow: true,  isWhole: true });
        let res = await Http.get(`${api}_check`, {
          province_code: this.query.province_code,
          ...query
        });
        if(res.code === 0){
          let queryStr = `${api}?province_code=${this.query.province_code}`;
          for (let item in query) {
            queryStr += `&${item}=${query[item]}`
          }
          window.open(queryStr);
        }else{
          this.$message({ title: '提示', message: res.message, type: 'error' });
        }
        this.$loading({ isShow: false });
      },

      //取消订单
      handleOrderCancel(id) {
        let {orderCancel, getOrderGetList, query} = this;
        this.$messageBox.confirm('取消该订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          orderCancel({
            id: id,
            callback: function () {
              getOrderGetList(query);
            }
          })
        }).catch(() => {

        })
      },

      //获取订单列表
      async getOrderGetList() {
        this.$loading({isShow: true, isWhole: true});
        let res = await Http.get(Config.api.orderQuery, this.query);
        this.$loading({isShow: false});
        if(res.code === 0){
          this.$data.dataItem = res.data;
        }else{
          this.$message({title: '提示', message: res.message, type: 'error'});
        }
      },
      //显示订单详情
      orderShowHideDetail(id){
        let pc = this.viewGetPageComponents('DetailOrderList');
        pc.orderShowHideDetail(id);
      },
      //取消订单
      async orderCancel({id, callback}) {
        this.$loading({isShow: true, isWhole: true});
        let res = await Http.post(Config.api.orderCancel, { id: id });
        this.$loading({isShow: false});
        if(res.code === 0){
          this.$message({title: '提示', message: '订单取消成功！', type: 'success'});
          callback && callback();
        }else{
          this.$message({title: '提示', message: res.message, type: 'error'});
        }
      },
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import '@/share/scss/table.scss';
  .order-no {
    color: inherit;
    padding: 5px 10px 5px 0;
    text-decoration: underline;
    cursor: pointer;
  }

  .order-type-icon {
    position: absolute;
    top: 3px;
    left: 120px;
    color: #FFF;
    display: block;
    width: 16px;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* is_gb_order === 1 */
  .gb-order {
    background-image: url("");
  }

  /* is_presale === 1 */
  .presale-order {
    background-image: url("");
  }

  .order-no:hover {
    font-weight: 600;
  }

  .action {
    a {
      font-size: 12px;
      text-decoration: underline;
    }

    a:hover {
      font-weight: 900;
    }
  }
</style>
<style lang="scss">
  @import '@/share/scss/table.global.scss';
</style>
